<!--
 * @Author: 清香白莲 1243327527@qq.com
 * @Date: 2023-09-11 17:00:44
 * @LastEditors: 清香白莲 1243327527@qq.com
 * @LastEditTime: 2023-09-12 14:22:05
 * @FilePath: /shang_study/src/components/Pagination/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="pagination">
        <button :disabled="pageNo == 1" @click="clickPageNo(pageNo - 1)">上一页</button>
        <button v-if="startNumAndEndNum.start > 1" @click="clickPageNo(1)" :class="{active:pageNo==1}">1</button>
        <button v-if="startNumAndEndNum.start > 2">···</button>

        <button v-for="index in (startNumAndEndNum.end - startNumAndEndNum.start + 1)" :key="index" @click="clickPageNo(startNumAndEndNum.start + index - 1)" :class="{active:pageNo==(startNumAndEndNum.start + index - 1)}">{{startNumAndEndNum.start + index - 1}}</button>

        <button v-if="startNumAndEndNum.end < (totalPage - 1)">···</button>
        <button v-if="startNumAndEndNum.end < totalPage"  @click="clickPageNo(totalPage)" :class="{active:pageNo==totalPage}">{{ totalPage }}</button>
        <button :disabled="pageNo == totalPage" @click="clickPageNo(pageNo + 1)">下一页</button>

        <button style="margin-left: 30px">共 {{total}} 条</button>
    </div>
</template>
  
<script>
export default {
    name: "Pagination",
    data() {
        return {
            
        }
    },
    props: ['pageNo', 'pageSize', 'total', 'continues'],
    computed: {
        totalPage() {
            // Math.ceil() 向上取整
            return Math.ceil(this.total / this.pageSize);
        },
        // 计算出连续的页码的起始数字与结束数字。
        startNumAndEndNum() {
            const {continues, pageNo, totalPage} = this;
            // 先定义两个变量存储起始数字与结束数字。
            let start = 1, end = 1;
            // 连续的页面数字【至少是continues页】，如果出现不正常的现象【就是不够continues页】。
            if (continues > totalPage) {
                start = 1;
                end = totalPage;
            }else {
                // 连续的页面数字【至少是continues页】，总页码大于continues。
                start = pageNo - Math.floor(continues / 2);
                end = pageNo + Math.floor(continues / 2);
                if (start < 1) {// 处理开始数据异常。
                    start = 1;
                    end = continues;
                }
                if (end > totalPage) {// 处理结束数据异常。
                    start = totalPage - continues + 1;
                    end = totalPage;
                }
            }
            return {'start': start, 'end': end};
        }
    },
    methods: {
        clickPageNo(pageNo) {
            this.$emit('getPageNo', pageNo);
        }
    },
}
</script>
  
<style lang="less" scoped>
.pagination {
    text-align: center;
    button {
        margin: 0 5px;
        background-color: #f4f4f5;
        color: #606266;
        outline: none;
        border-radius: 2px;
        padding: 0 4px;
        vertical-align: top;
        display: inline-block;
        font-size: 13px;
        min-width: 35.5px;
        height: 28px;
        line-height: 28px;
        cursor: pointer;
        box-sizing: border-box;
        text-align: center;
        border: 0;

        &[disabled] {
            color: #c0c4cc;
            cursor: not-allowed;
        }

        &.active {
            cursor: not-allowed;
            background-color: #409eff;
            color: #fff;
        }
    }
}
.active {
    background: skyblue;
}
</style>